<template>
  <div id="articlePage">
    <Row>
      <Col span="14" offset="5">
        <div id="articlePageMain">
          <div id="articlePageMainHead">
            <img :src="this.$config.serverUrl + articleTypeImage" />
            <h1 class="title">{{ article.title }}</h1>
          </div>
          <div
            v-highlight
            v-html="article.content"
            id="articlePageMainContent"
          ></div>
          <div id="articlePageMainFooter">
            <div>
              <mavon-editor
                v-model="comments"
                ref="md"
                style="min-height: 400px"
                codeStyle="vs2015"
                :subfield="false"
                defaultOpen="edit"
              />
              <div class="commentSubmit">
                <Button type="primary" size="large">发表评论</Button>
              </div>
            </div>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
var u = '../../../test.html'
export default {
  components: { mavonEditor },
  props: {
    id: { required: true }
  },
  data() {
    return {
      content: '',
      comments: '',
      article: {},
      articleTypeImage: ''
    }
  },
  methods: {},
  mounted() {
    let img = document.querySelectorAll('#articlePageMainContent img')
    img.forEach(
      x =>
        (x.src = x.src.replace(
          this.$store.getters.hostPath,
          this.$config.serverUrl
        ))
    )
    document.title = this.$author + '-' + this.article.Title
  },
  created() {
    this.$api.Article.GetArticle({ id: this.id }).then(res => {
      this.article = res.data
      this.article.content = this.$marked(this.article.content)
      this.articleTypeImage = this.$store.state.articleTypeDic[
        this.article.articleTypeId
      ].image
    })
  },
  beforeDestroy() {
    // this.$store.commit('deleteFormArticleList', this.id)
  }
}
</script>
<style lang="scss">
#articlePageMainHead {
  display: flex;
  justify-content: flex-start;
  img {
    width: 42px;
    height: 42px;
    margin-right: 10px;
  }
}
#articlePage {
  opacity: $baseOpacity;
  margin-top: 80px;
}
#articlePageMain {
  background: #fff;
  padding: 30px;
  box-shadow: 0 0px 3px rgba(100, 100, 100, 0.3);
}
#articlePageMainContent {
  margin: 30px 0px;
}
.commentSubmit {
  margin-top: 30px;
}
#articlePageMainFooter {
  margin-top: 80px;
}
</style>
